<template>
  <div class="mt-4">
    <el-input
      style="min-width: 400px"
      v-model="input"
      placeholder="输入芯片ID"
    >
      <template #append>
        <el-button type="primary" @click="addInputs">新增传感器+</el-button>
      </template>
    </el-input>
  </div>
  <div>
    <div class="m-4">
      <span class="category">传感器ID:</span>
      <el-select
        v-model="value"
        value-key="id"
        placeholder="Select"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.label"
          :value="item"
        />
      </el-select>
    </div>
    <div class="m-4">
      <span class="category">寄存器:</span>
      <el-select
        v-model="value1"
        value-key="id"
        placeholder="Select"
        style="width: 240px"
      >
        <el-option
          v-for="item in options1"
          :key="item.id"
          :label="item.label"
          :value="item"
        />
      </el-select>
    </div>
    <div class="m-4">
      <span class="category">参数:</span>
      <el-input
        style="width: 240px"
        v-model="inputParam"
        placeholder="输入修改参数"
      >
      </el-input>
    </div>
    <input v-for="(input, index) in inputs" :key="index" type="text" />
  </div>
</template>

<script setup lang="ts">
// 引入axios
import axios from "axios";
import { ref } from "vue";
const input = ref("");  //inputParam
const inputParam = ref("35");
const inputs = ref([]);
type Option = {
  id: number;
  label: string;
};

const options = ref([
  { id: 1, label: "08" },
  { id: 2, label: "02" },
  { id: 3, label: "03" },
  { id: 4, label: "04" },
]);
const options1 = ref([
  { id: 1, label: "00000001" },
  { id: 2, label: "00010001" },
  { id: 3, label: "00040001" },
]);
const value = ref<Option>(options.value[0]);
const value1 = ref<Option>(options1.value[0]);
// 定义一个方法来向数组中添加两个新元素
const addInputs = () => {
  // 这里简单地使用数组的length作为唯一标识，实际项目中可能需要更复杂的逻辑
  inputs.value.push(
    { id: inputs.value.length },
    { id: inputs.value.length + 1 }
  );
};
</script>

<style scoped>
.category {
  display: inline-block; /* 或 block */
  width: 70px;
}
</style>
